<template>
  <div class="pickupPay">
    <div class="pp-title">
      <span class="sign"></span>
      <span>提货支付</span>
    </div>
    <div class="pp-content">
      <!--<div class="ppc-line">
        <label for="applicaion">申请BPX：</label>
        <input type="text" id="applicaion" disabled :value="result.expertBPX">
      </div>-->
      <div class="ppc-line">
        <label for="w-weight">野山参重量：</label>
        <input type="text" id="w-weight" disabled :value="result.wildGinsengWeight">
      </div>
      <div class="ppc-line">
        <label for="w-quanlity">野山参数量：</label>
        <input type="text" id="w-quanlity" disabled :value="result.fiveGinsengNum">
        <!--<span>5g以下人参</span>-->
      </div>

      <!--<div class="ppc-line">
        <label for="w-quanlity"></label>
        <input type="text" id="w-quanlity" disabled :value="result.fiveSevenGinsengNum">
        <span>5g-7g人参</span>
      </div>
      <div class="ppc-line">
        <label for="w-quanlity"></label>
        <input type="text" id="w-quanlity" disabled :value="result.sevenNineGinsengNum">
        <span>7g-9g人参</span>
      </div>
      <div class="ppc-line">
        <label for="w-quanlity"></label>
        <input type="text" id="w-quanlity" disabled :value="result.nineElevenGinsengNum">
        <span>9g-11g人参</span>
      </div>-->

      <div class="ppc-line">
        <label for="accounting">核算总额：</label>
        <input type="text" id="accounting" placeholder="请输入核算总额" disabled :value="result.checkBPX">
      </div>
      <div class="ppc-line">
        <label for="payAmount">实际BPX数量：</label>
        <input type="number" id="payAmount" placeholder="请输入实际BPX数量" v-model='sjbpx' @mousewheel='disabledwheel($event)'>
      </div>
      <div class="ppc-line">
        <label for="payAmount">BPX提币编号：</label>
        <input type="text" id="payAmount" placeholder="请输入BPX提币编号" v-model='currency'>
      </div>
      <div class="ppc-line">
        <label for="payAmount">BPX付币账号：</label>
        <input type="text" id="payAmount" placeholder="请输入BPX付币账号" v-model='payment'>
      </div>
      <div class="ppc-line">
        <label for="package">工本费用：</label>
        <input type="text" id="package" placeholder="请输入包装费用" disabled :value="result.flatCost">
      </div>
      <div class="ppc-line">
        <label for="delivery">快递费用：</label>
        <input type="text" id="delivery" placeholder="请输入快递费用" disabled :value="result.deliverCost">
      </div>
      <div class="ppc-line">
        <label for="payAmount">*打款金额：</label>
        <input type="number" id="payAmount" placeholder="请输入实际打款金额" @mousewheel='disabledwheel($event)' :value="result.paySum">
      </div>
      <div class="ppc-line">
        <label for="remittance">*汇款人：</label>
        <input type="text" id="remittance" placeholder="请输入汇款人姓名" v-model='name'>
      </div>
      <div class="ppc-line">
        <label for="payChannel">银行名称：</label>
        <input type="text" id="payChannel" placeholder="请输入银行名称或支付宝账户等其他渠道" v-model='say'>
      </div>
      <div class="ppc-line">
        <label for="account">银行卡号：</label>
        <input type="text" id="account" placeholder="付款卡号或账号" v-model="account">
      </div>
      <div class="ppc-line">
        <label for="receiptNum">收款卡号：</label>
        <input type="text" id="receiptNum" disabled :value="result.bankNo">
      </div>
      <div class="payBtn" @click='sure'>确认支付</div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "pickupPay",
  data() {
    return {
      result: {
        expertBPX: 0,
        wildGinsengWeight: 0,
        wildGinsengNum: 0,
        flatCost: 0,
        deliverCost: 0,
        payCounFee: 0,
        bankNo: 0,
        paySum: 0
      },
//      monery: "",
      name: "",
      say: "",
      account: "",
      id: "",
      sjbpx: "",
      currency: "",
      payment: ""
    };
  },
  created() {
    this.id =
      Number(this.$route.params.id) ||
      Number(localStorage.getItem("thid", this.id));
    localStorage.setItem("thid", this.id);
    this.getIdata();
  },
  methods: {
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    getIdata() {
      u.getPickups({ id: this.id }, data => {
        if (data && data.code == "200") {
          this.result = data.data;
          this.sjbpx=this.result.checkBPX;
          u.getbankinfo(data => {
            if (data && data.code == "200") {
              this.result.bankNo = data.data.bankName+'-'+data.data.openBank+'-'+data.data.bankNo+'-'+data.data.name;
            }
          });
        }
      });
    },
    sure() {
      if (
        (/*this.result.paySum.trim() === "" ||*/
          this.name.trim() === "" ||
          this.say.trim() === "" ||
          this.account.trim() === "" ||
          this.result.paySum <= 0 ||
        this.currency.trim() === "" || this.payment.trim() === "")
      ) {
        return Message({
          message: "输入错误请重新填写",
          type: "error"
        });
      }
      if (!t.isNumber(this.result.paySum)) {
        return Message({
          message: "请输入数字",
          type: "error"
        });
      }
      if ( Number(this.sjbpx) !== Number(this.result.checkBPX)) {
        return Message({
          message: "实际bpx数量需与核算总额一致",
          type: "error"
        });
      }
        if ( Number(this.result.paySum) !== Number(this.result.flatCost+this.result.deliverCost)) {
        return Message({
          message: "打款金额需等于工本费用及快递费用之和",
          type: "error"
        });
      }
      u.payPickup(
        {
          id: this.id,
          bankNo: this.account,
          channel: this.say,
          payFee: this.result.paySum,
          payUserName: this.name,
          bpxTakenNo: this.currency,
          bpxPayAccount: this.payment,
          bpxPayNum: this.sjbpx
        },
        data => {
          if (data && data.code == "200") {
            Message({
              message: "支付成功",
              type: "success"
            });
            this.$router.push({ path: "/delivery" });
          } else {
            Message({
              message: data.message,
              type: "error"
            });
          }
        }
      );
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.pickupPay {
  width: 100%;
  height: 100%;
  background: white;

  .pp-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #282828;
    border-bottom: 1px solid #f4f5f6;

    span {
      vertical-align: middle;
    }

    .sign {
      display: inline-block;
      margin-right: 10px;
      background: #ffb001;
      width: 5px;
      height: 18px;
    }
  }

  .pp-content {
    padding: 34px 30px 20px 30px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }

    .ppc-line {
      margin-bottom: 20px;
      height: 40px;

      label {
        display: inline-block;
        width: 135px;
        font-size: 14px;
        color: #3d3d3d;
      }

      input {
        padding: 0 14px;
        width: 390px;
        height: 100%;
        font-size: 14px;
        color: #747474;
        outline: none;
        border: 1px solid #e6e9ed;

        &:focus {
          border-color: #ffb001;
        }

        &::-webkit-input-placeholder {
          color: #cccccc;
        }

        &:-moz-placeholder {
          color: #cccccc;
        }
      }

      span {
        font-size: 12px;
        color: #ffb001;
        margin-left: 10px;
      }
    }

    .payBtn {
      margin-top: 50px;
      margin-left: 141px;
      width: 118px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: white;
      text-align: center;
      border-radius: 2px;
      background: #ffb001;
      cursor: pointer;
    }
  }
}
</style>
